<template>
    <div class="header">
        <div class="header-return" v-show="showHeader">
            <span class="border-return"></span>
            <span class="iconfont return" @click="toHome">&#xe604;</span>
        </div>

        <div class="header-top" 
        v-show="!showHeader"
        :style="styleOpacity">
            <div class="header-left">
                <span class="iconfont" @click="toHome">
                    &#xe604;
                </span>
            </div>
            新疆欢迎您
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            showHeader:true,
            styleOpacity:{
                opacity:0
            }
        }
    },
    methods:{
        toHome(){
            this.$router.push('/')
        }
    },
    mounted(){
        let that=this
        window.addEventListener("scroll",function(){
           let top=document.documentElement.scrollTop
           if(top>45){
               let opacity =top/130
               opacity=opacity>1?1:opacity
               that.styleOpacity={opacity}
               that.showHeader=false
           }else{
               that.showHeader=true
           }
        })
    }
}
</script>
<style scoped>
.header-return{
    position: absolute;
    left: .1rem;
    top: .1rem;
    width: 0.72rem;
    height: 0.72rem;
}
.border-return{
    display: block;
    background: #000;
    width: 0.72rem;
    height: 0.72rem;
    opacity: 0.5;
    border-radius: .36rem
}
.return{
    position: absolute;
    color: #fff;
    left: -6px;
    top: 0;
    width: 0.72rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    text-indent: .24rem;
    font-size: 0.32rem;
    font-weight: bold;
}
.header-top{
    z-index: 99;
    position: fixed;
    top: 0;
    text-align: center;
    width: 100%;
    line-height: 0.88rem;
    background-color: #00bcd4; 
    color:#fff;
    font-size: 0.36rem;
    opacity: .5;
}
.header-left{
    position: absolute;
    top: 0;
    width: 0.4rem;
    padding: 0 .2rem;
    text-align: center;
    font-size: bolder;
}
</style>
